<template>
	<div>
    <div class="modal">
	   <div class="modal-bg" @click="NoticeClose"></div>
      <div class="notices">
        <div class="rele-title">通告列表<span @click="NoticeClose">X</span></div>
        <div class="notices-title notices-title2">
          <p>发布人</p>
          <p>发布内容</p>
        </div>
        <div class="notices-li">
          <div class="notices-title notices-title1" v-for="item in allnoticeitems">
            <p>{{item.username}}</p>
            <p>{{item.content}}</p>
          </div>
        </div>
        <div class="notices-li">
          <div class="notices-title notices-title1">
            <el-pagination
              @current-change="pagChange"
              layout="prev, pager, next"
              :current-page="datas.current_page"
              :page-size="datas.per_page"
              :total="datas.total">
            </el-pagination>
          </div>
        </div>
    </div>
	</div>
  </div>
</template>
<script>
    export default {
      props:{
          NoticeClose:{
            type:Function
          }
      },
      data () {
	      return {
          allnoticeitems:[],
          datas:[],
	       }
      },
      methods: {
        getallnoticeitems(){
          let that = this;
          that.$http.get('/index/notice')
            .then(function (res) {
              that.datas = res.data
              that.allnoticeitems = res.data.data

            })
            .catch(function (err) {
              console.log(err);
            })
        },
        pagChange(val){
          let that = this;
          that.$http.get('/index/notice', {
            params: {
              page: val
            }
          }).then(res => {
            let data = res.data;
            that.allnoticeitems = data.data;
            that.datas = data;
          }).catch(err => {
            console.log(err)
          })
        }
      },
      created(){
      },
      mounted(){
        this.getallnoticeitems()
      }
}
</script>
<style scoped>
/*公告更多*/
.notices-title{
  width: 100%;
  float: left;
  background: #d3d3d3;
}
.notices-title2 p{
  font-weight: bold;
  float: left;
  line-height: 35px;
}
.notices-title2 p:nth-child(1){
  width: 30%;
  text-align: center;
}
.notices-title p:nth-child(2){
  width: 70%;
}
.notices-title1 p{
  font-weight: bold;
  float: left;
  margin-top: 10px;
}
.notices-title p:nth-child(1){
  width: 30%;
  text-align: center;
}
.notices-title p:nth-child(2){
  width: 70%;
}
.notices-title1{
  background: #ffffff
}
.notices-title1 p{
  font-weight: normal;
}
.notices{
  width: 30%;
  position: absolute;
  left: 35%;
  top: 50%;
  margin-top: -170px;
  z-index: 10;
  background: #ffffff;
  box-shadow: #e8e7e7 0px 0px 10px;
  height: 340px;
  overflow-y:auto;
  border-radius: 5px;
}
/*公告更多 end*/

</style>
